<template>
  <div class="index-header">
    <!-- 版心 -->
    <div class="layer">
      <!-- 搜索框 -->
      <el-autocomplete
        class="inline-input"
        v-model="$store.state.searchTitle"
        :fetch-suggestions="querySearch"
        placeholder="请输入待搜索的标题"
        @select="handleSelect"
        :trigger-on-focus="false"
        size="small"
      ></el-autocomplete>
      <!-- <e-input
        clearable
        placeholder="请输入待搜索的文章标题"
        v-model="$store.state.searchTitle"
        @input="searchInput_fn"
      ></e-input> -->
      <!-- 日间/夜间模式 -->
      <DayMode></DayMode>
      <!-- 时间选择 -->
      <div class="time">
        <span>时间：</span>
        <el-radio-group v-model="time" size="small" @change="dateChange">
          <el-radio-button label="全部"></el-radio-button>
          <!-- <el-radio-button label="今天"></el-radio-button> -->
          <el-radio-button label="3天内"></el-radio-button>
          <el-radio-button label="1周内"></el-radio-button>
          <el-radio-button label="1月内"></el-radio-button>
        </el-radio-group>
      </div>

      <!-- 新建文章按钮 -->
      <el-button type="primary" size="small" @click="gotoPublic_fn"
        >创作</el-button
      >
      <!-- 登录 -->
      <el-button v-if="un" type="primary" size="small" @click="loginout_fn"
        >{{ un }},退登</el-button
      >
      <el-button
        v-else
        type="primary"
        size="small"
        @click="$router.push('/login')"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: "全部",
      un: "",
    };
  },
  components: {
    DayMode: () => import("../../components/DayMode.vue"),
    EInput: () => import("../../components/EInput.vue"),
  },
  methods: {
    gotoPublic_fn() {
      this.$router.push("/article");
    },
    loginout_fn() {
      this.removeItem("un");
      this.un = "";
      this.$message.success("退出登录成功！");
    },
    searchInput_fn() {
      this.$bus.$emit("searchTitle");
    },
    dateChange() {
      switch (this.time) {
        case "全部":
          this.$bus.$emit("getArticlesByDate", 0);
          break;
        case "3天内":
          this.$bus.$emit("getArticlesByDate", 3);
          break;
        case "1周内":
          this.$bus.$emit("getArticlesByDate", 7);
          break;
        case "1月内":
          this.$bus.$emit("getArticlesByDate", 30);
          break;
      }
    },
    querySearch(searchStr, cb) {
      let reg = new RegExp(searchStr);
      let data = this.$store.state.articles.filter((item) =>
        reg.test(item.title)
      );
      data = data.map((item) => {
        item.value = item.title;
        return item;
      });
      console.log(data);
      cb(data);
    },
    handleSelect(o) {
      this.$store.state.searchTitle = "";
      this.$router.push("/art?id=" + o.id);
    },
  },
  mounted() {
    this.un = this.getItem("un");
  },
};
</script>

<style lang="less" scoped>
.index-header {
  height: 100%;
  // background-color: transparent;
  .layer {
    width: 1000px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input,
    .el-input /deep/ input {
      width: 240px;
      height: 30px;
    }
    .time {
      display: inline-block;
      span {
        vertical-align: middle;
      }
      .el-radio-group {
        vertical-align: middle;
      }
    }
  }
}
</style>